import React, { useEffect, useState } from 'react';
import { Tag, Pagination, Col, Row, Statistic } from 'antd';
import ProCard from '@ant-design/pro-card';
import Texty from 'rc-texty';
import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
import ProList from '@ant-design/pro-list';
import { useModel, history } from 'umi';

const { Countdown } = Statistic;
const deadline =
  new Date(new Date().getFullYear(), 11, 31).getTime() + 24 * 60 * 60 * 1000;

const IconText = ({ icon, text }: { icon: any; text: string }) => (
  <span>
    {React.createElement(icon, { style: { marginRight: 8 } })}
    {text}
  </span>
);

export default (prods) => {
  console.log('prods');
  console.log(prods);
  //数据模型
  const articleModel = useModel('article', (model) => ({
    total: model.total,
    list: model.list,
    getList: model.getList,
  }));
  const tagModel = useModel('tag', (model) => ({
    total: model.total,
    list: model.list,
    getList: model.getList,
  }));
  //搜索
  const [search, setSearch] = useState({
    search_page: 1,
    search_limit: 10,
    search_category: prods.match.params.id ? prods.match.params.id : 0,
    search_tag: prods.location.query.tag ? prods.location.query.tag : 0,
  });
  //初始化
  useEffect(() => {
    setSearch({
      search_page: 1,
      search_limit: 10,
      search_category: prods.match.params.id ? prods.match.params.id : 0,
      search_tag: prods.location.query.tag ? prods.location.query.tag : 0,
    })
  }, [prods.match.params.id,prods.location.query.tag]);
  useEffect(() => {
    console.log(search);
    articleModel.getList(search);
    tagModel.getList({
      search_page: 1,
      search_limit: 0,
    });
  }, [search]);
  return (
    <Row>
      <Col xs={24} sm={24} md={16} lg={16} xl={16}>
        <ProList<{ title: string }>
          itemLayout="vertical"
          rowKey="id"
          dataSource={articleModel.list}
          metas={{
            title: {
              dataIndex: 'title',
            },
            description: {
              dataIndex: 'tags',
              render: (value, record, index) => {
                const html = Array.isArray(value)
                  ? value.map((item) => {
                      return <Tag key={item.id}>{item.name}</Tag>;
                    })
                  : [];
                return <>{html}</>;
              },
            },
            actions: {
              render: () => [
                <IconText
                  icon={StarOutlined}
                  text="156"
                  key="list-vertical-star-o"
                />,
                <IconText
                  icon={LikeOutlined}
                  text="156"
                  key="list-vertical-like-o"
                />,
                <IconText
                  icon={MessageOutlined}
                  text="2"
                  key="list-vertical-message"
                />,
              ],
            },
            extra: {
              render: () => (
                <img
                  width={272}
                  alt="logo"
                  src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                />
              ),
            },
            content: {
              dataIndex: 'summary',
              render: (value, record, index) => {
                return <div>{value}</div>;
              },
            },
          }}
          onRow={(record, index) => {
            return {
              onClick: (event) => {
                history.push('/detail/' + record.id);
              }, // 点击行
              onDoubleClick: (event) => {},
              onContextMenu: (event) => {},
              onMouseEnter: (event) => {}, // 鼠标移入行
              onMouseLeave: (event) => {},
            };
          }}
        />
        <Pagination
          hideOnSinglePage={true}
          style={{ textAlign: 'center' }}
          defaultCurrent={search.search_page}
          total={articleModel.total}
          onChange={(page, pageSize) => {
            setSearch({
              ...search,
              search_page:page,
              search_limit:pageSize,
            })
          }}
        />
      </Col>
      <Col xs={0} sm={0} md={8} lg={8} xl={8}>
        <ProCard
          headStyle={{ textAlign: 'center',justifyContent:'center' }}
          title={<Countdown value={deadline} format="D 天 H 时 m 分 s 秒" />}
          layout="center"
          direction="column"
        >
          <h3>
            <Texty>战吗 战啊 以这最卑微的梦</Texty>
          </h3>
          <h3>
            <Texty>致那黑夜中的呜咽与怒吼</Texty>
          </h3>
        </ProCard>
        <ProCard title="标签云">
          {tagModel.list.map((tag) => {
            return (
              <Tag
                key={tag.id}
                style={{ margin: '5px' }}
                onClick={() => {
                  history.push('/list?tag=' + tag.id);
                }}
                color="success"
              >
                {tag.name}
              </Tag>
            );
          })}
        </ProCard>
      </Col>
    </Row>
  );
};
